
                <!--
 * @Description:
 * @Author: sunye
 * @Date: 2022-02-11 17:57:07
 * @LastEditTime: 2022-02-15 10:05:41
-->
<template>
  <div
    class="map"
    id="myChart4"
    shadow="never"
    style="height: 100%; width: 100%"
  ></div>
</template>

<script>
import 'echarts-wordcloud'
export default {
  name: 'card',
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      let myChart = this.$echarts.init(document.getElementById('myChart4'))
      const chinaJson = require('assets/chinaChange.json')
      chinaJson.features[8].properties['cp'] = [106.59487, 26.90783]

      var myData = [
        { name: '贵州', value: [106.625442, 26.618209, 18] },
        { name: '广东', value: [113.280637, 23.125178, 20] },
        { name: '北京', value: [116.405285, 39.904989, 32] }
      ]
      let option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        geo: {
          zoom: 1.35,
          map: 'china',
          roam: true, // 滚轮放大缩小
          itemStyle: {					// 定义样式
            normal: {					// 普通状态下的样式
              areaColor: 'rgba(0,255,255,0.15)',
              borderColor: 'rgba(0,255,255,0.45)',
              shadowColor: 'rgba(0,255,255,0.45)',
              shadowBlur: 10
            },
            emphasis: {					// 高亮状态下的样式
              areaColor: 'rgba(0,255,255,0.5)',
              borderColor: 'rgba(0,255,255,0.65)'
            }
          },
          label: {
            normal: {
              show: false,
              color: '#fff'
            },
            emphasis: {
              show: true,
              color: '#fff'
            }
          }
        },
        backgroundColor: 'transparent', // 图表背景色
        series: [
          {
            type: 'effectScatter', // series图表类型
            coordinateSystem: 'geo', // series坐标系类型
            symbolSize: function (val) {
              return val[2]
            },
            itemStyle: {
              color: function (e) {
                return e.data.value[2] > 30 ? '#FFD200' : '#00FFCC'
              }
            },
            data: myData
          }
        ]
      }
      // 绘制图表
      this.$echarts.registerMap('china', chinaJson)
      myChart.setOption(option)
    }
  }

}
</script>
